<template>
  <div class="dashboard-editor-container">
    <h1 v-show="userId == 1">聚峰数据管理</h1>
    <h1 v-show="userId != 1"
        style="text-align: center"
        v-hasRole="['demand_customer']">
      聚峰数据管理系统
    </h1>
    <div v-show="userId != 1"
         v-hasRole="['supplier']">
      <div class="outer">
        <div>
          <h1 style="line-height: 50px">
            {{ companyInfo.appName }}，{{ now }}
          </h1>
        </div>
        <div style="
            width: 100%;
            float: left;
            marign: 8px;
            margin-bottom: 20px;
            background: #ffffff;
          ">
          <div>
            <h3 style="line-height: 30px; float: left; margin: 20px">
              数据趋势
            </h3>
            <el-select v-model="time"
                       style="float: right; margin: 20px"
                       @change="changeTime">
              <el-option value="last_7_days"
                         label="过去七天"></el-option>
              <el-option value="last_15_days"
                         label="过去十五天"></el-option>
              <el-option value="common_now_month"
                         label="本月"></el-option>
            </el-select>
          </div>
          <div class="row">
            <div class="col"
                 v-for="(item, index) in arr"
                 :key="index"
                 @click="getIndex(item, index)">
              <p>{{ item.name }}</p>
              <h1>{{ item.num }}</h1>
              <span :class="id == index ? 'cur' : ''"
                    style="
                  width: 50%;
                  display: block;
                  margin: 0 auto;
                  padding-bottom: 10px;
                "></span>
            </div>
          </div>
          <el-row style="padding: 16px 16px 0; margin-bottom: 32px">
            <line-chart :chart-data="lineChartData"
                        :text="text" />
          </el-row>
        </div>
        <div style="width: 100%; height: 100%">
          <div class="rowItem">
            <div class="colItem"
                 style="margin-right: 20px">
              <div class="chart-wrapper">
                <h2 style="line-height: 5px">数据每日详情</h2>
                <div style="overflow: hidden; height: 70px">
                  <p style="width: 70%; float: left">
                    每日上传的数据会进行部分或者全部数据的抽样回访
                    抽样意向率和重复率次日反馈
                  </p>
                  <img style="width: 70px; height: 70px; float: right"
                       src="../assets/image/1.png" />
                </div>
                <el-button style="margin-top: 20px"
                           @click="goView">去查看</el-button>
              </div>
            </div>
            <div class="colItem">
              <div class="chart-wrapper">
                <h2 style="line-height: 5px">数据上传</h2>
                <div style="overflow: hidden; height: 70px">
                  <div style="float: left">
                    <p style="line-height: 10px">
                      请按照 数据上传模板 整理数据进行上传
                    </p>
                    <p style="line-height: 20px">
                      <a style="text-decoration: underline; color: #2386ff"
                         href="/template/template.xlsx">数据上传模板下载
                      </a>
                      <span style="color: red">（请勿修改表头）</span>
                      <!-- <a
                        style="
                          text-decoration: underline;
                          color: #2386ff;
                          margin-left: 15px;
                        "
                        href="/demand/demand.xlsx"
                      > -->
                      <el-button style="
                          lin-height: 10px;
                          font-size: 16px;
                          text-decoration: underline;
                        "
                                 type="text"
                                 @click="downloadNeed">
                        下载需求品牌城市</el-button>
                      <!-- </a> -->
                      <!-- <a
                        style="
                          text-decoration: underline;
                          color: #2386ff;
                          margin-left: 15px;
                        "
                        @click="downloadCity"
                        >下载全部城市表</a
                      > -->
                      <!-- <a
                        style="
                          text-decoration: underline;
                          color: #2386ff;
                          margin-left: 15px;
                        "
                        @click="downloadCarSerial"
                        >下载全部品牌车型表</a
                      > -->
                    </p>
                  </div>
                  <img style="width: 70px; height: 70px; float: right"
                       src="../assets/image/2.png" />
                </div>
                <el-button style="margin-top: 20px"
                           @click="goUpload">去上传</el-button>
                <el-button style="margin-top: 20px;margin-left:30%;"
                           @click="errorFileDownload()">失败文件下载</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <h2>财务概览</h2>
        <p>可结算金额</p>
        <h1>{{ financeData.canSettlementAmount }}<span>元</span></h1>
        <p>冻结金额</p>
        <h1>{{ financeData.freezeAmount }}<span>元</span></h1>
        <el-button type="primary"
                   style="margin: 10px; margin-left: 2.5%; width: 85%"
                   @click="incomeDetails">收入明细</el-button>
      </div>
      <el-dialog :close-on-click-modal="false"
                 :visible.sync="dialogVisible"
                 width="70%"
                 center>
        <h3>示例数据</h3>
        <el-table :data="tableData"
                  style="width: 100%">
          <el-table-column prop="name"
                           align="center"
                           label="name"
                           :render-header="renderHeaderName">
          </el-table-column>
          <el-table-column prop="phone"
                           align="center"
                           label="phone"
                           :render-header="renderHeader">
          </el-table-column>
          <el-table-column prop="brandName"
                           align="center"
                           label="brandName"
                           :render-header="renderHeaderBrand">
          </el-table-column>
          <el-table-column prop="serialName"
                           align="center"
                           label="serialName"
                           :render-header="renderHeaderSerial">
          </el-table-column>
          <el-table-column prop="cityName"
                           align="center"
                           label="cityName"
                           :render-header="renderHeaderCity">
          </el-table-column>
          <el-table-column prop="ip"
                           align="center"
                           label="ip"
                           :render-header="renderHeaderIp">
          </el-table-column>
          <el-table-column prop="mode"
                           align="center"
                           label="mode"
                           :render-header="renderHeaderMode">
          </el-table-column>
          <el-table-column prop="source"
                           align="center"
                           label="source"
                           :render-header="renderHeaderSource">
          </el-table-column>
          <el-table-column prop="addr"
                           align="center"
                           label="addr"
                           :render-header="renderHeaderAddr">
          </el-table-column>
        </el-table>
        <div style="overflow: hidden">
          <div style="width: 50%; float: left">
            <p style="color: red">
              * 数据列表仅供参考;仅支持上传表单1( Sheet1 )中的数据
            </p>
            <p style="color: red">* 若上传失败，将返回失败文件，请注意下载</p>
            <h3>
              <a style="color: #2386ff; text-decoration: underline"
                 href="/template/template.xlsx">
                数据上传模板</a><span style="color: red">（请勿修改表头）</span>
              <!-- <a
                style="
                  text-decoration: underline;
                  color: #2386ff;
                  margin-left: 15px;
                "
                href="/demand/demand.xlsx"
              > -->
              <el-button type="text"
                         @click="downloadNeed">下载需求品牌城市</el-button>
              <!-- </a> -->
              <!-- <a
            style="
              text-decoration: underline;
              color: #2386ff;
              margin-left: 15px;
            "
            @click="downloadCity"
            >下载全部城市表</a
          >
          <a
            style="
              text-decoration: underline;
              color: #2386ff;
              margin-left: 15px;
            "
            @click="downloadCarSerial"
            >下载全部品牌车型表</a
          > -->
            </h3>
            <el-upload class="avatar-uploader"
                       ref="upload"
                       drag
                       :show-file-list="true"
                       accept=".xlsx, .xls"
                       action="alert"
                       multiple
                       :on-remove="handleRemove"
                       :on-change="loadJsonFromFile"
                       :on-exceed="onExceed"
                       :auto-upload="false"
                       :limit="1">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip"
                   slot="tip"
                   style="color: red">
                一次仅能上传一个文件，文件格式为xlsx、xls，且文件不超过10MB
              </div>
            </el-upload>
            <div style="padding-left: 40px;">
              <el-form :rules="rules"
                       ref="upLoadBlur"
                       class="demo-form-inline"
                       :model="ruleForm">
                <el-form-item label="上传类型:"
                              prop="radioType">
                  <el-radio-group size="medium"
                                  @change="()=>$refs['upLoadBlur'].validate()"
                                  v-model="ruleForm.radioType">
                    <el-radio label="1"
                              border>新车</el-radio>
                    <el-radio label="2"
                              border>二手车</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div style="width: 50%; float: left; color: #ebb563; line-height: 20px">
            <p style="color: black">常见问题归纳：</p>
            <p>1.上传数据的品牌车型需跟对照表上的品牌车型相对应</p>
            <p style="color: red">
              错误示例：<span>上汽大众 宝来 <i class="el-icon-circle-close"></i></span>
              <span style="margin-left: 30px">领克 05 <i class="el-icon-circle-close"></i></span>
            </p>
            <p style="color: green">
              正确示例：<span>一汽大众 宝来 <i class="el-icon-circle-check"></i></span>
              <span style="margin-left: 30px">
                领克 领克05 <i class="el-icon-circle-check"></i>
              </span>
            </p>
            <p>2.手机号格式规范,1打头11位数字</p>
            <p>3.ip不通过？注意填写真实的用户ip,上传数据的ip不能为同一个ip</p>
            <p>4.注意品牌车型单元格不能有字符串形式，纯文本格式上传</p>
            <p>5.数据上传完毕后下载失败文件，查看失败详情</p>
            <p>6.其他问题联系客服：15301177443</p>
          </div>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button type="primary"
                     @click="commitDataOrderFile">确认上传</el-button>
        </span>
      </el-dialog>
      <el-dialog :close-on-click-modal="false"
                 :visible.sync="show"
                 width="30%"
                 :before-close="close"
                 center>
        <h2 style="text-align: center">失败文件点击下载</h2>
        <el-button type="success"
                   style="position: relative; left: 50%; margin-left: -40px">
          <a :href="'/excle/' + url">下载</a>
        </el-button>
      </el-dialog>
    </div>

    <el-dialog :close-on-click-modal="false"
               :visible.sync="errorFileType"
               title="失败文件下载"
               width="50%"
               center>
      <el-table :data="errorFileData"
                style="width: 100%">
        <el-table-column prop="fileName"
                         label="失败文件名称">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间">
        </el-table-column>
        <el-table-column label="操作"
                         width="80">
          <template slot-scope="scope">
            <el-button @click="errorFileType=false"
                       type="text"
                       size="small">
              <a :href="'/excle/' +scope.row.fileName">下载</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import LineChart from "./dashboard/LineChart";
import {
  querySupplierDataList,
  commitDataOrderFile,
  querySupplierInfo,
  querySupplierFinanceInfo,
  downloadCity,
  downloadCarSerial,
  downloadExternalNeedList,
  querySupplierUploadError
} from "@/api/supplier/supplier.js";
import { mapGetters } from "vuex";
export default {
  name: "Index",
  components: {
    LineChart,
  },
  data () {
    return {
      ruleForm: {
        radioType: ""
      },
      rules: {
        radioType: [
          { required: true, message: '上传类型：请选择上传类型 新车或二手车', trigger: 'blur' }
        ]
      },
      errorFileType: false,
      errorFileData: [],
      user: {},
      dialogVisible: false,
      text: "数据总量",
      //时间
      time: "last_7_days",
      lineChartData: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
      },
      id: 0,
      arr: [
        { name: "数据总量", num: 0 },
        { name: "使用条数", num: 0 },
        { name: "意向率", num: 0 },
        { name: "失败数", num: 0 },
      ],
      tableData: [
        {
          phone: 13012345678,
          name: "张三",
          ip: "192.168.0.1",
          cityName: "北京",
          brandName: "奥迪",
          serialName: "Q3",
          mode: "0",
          source: "聚峰数据",
          time: "2020-12-01 12:00:00",
          addr: "北京海淀区",
        },
      ],
      file: {},
      uploadFilename: "",
      companyInfo: {},
      flag: false,
      url: "",
      show: false,
      name: "",
      financeData: {},
      dataList: [],
    };
  },
  computed: {
    ...mapGetters(["userId", "roles"]),
    now () {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let text = ``;
      // 判断当前时间段
      if (hours > 0 && hours <= 10) {
        text = `早上好`;
      } else if (hours > 10 && hours < 14) {
        text = `中午好`;
      } else if (hours >= 14 && hours < 18) {
        text = `下午好`;
      } else if (hours >= 18 && hours <= 24) {
        text = `晚上好`;
      } else {
        text = `晚上好`;
      }
      return text;
    },
  },
  created () {
    if (this.roles.includes("supplier")) {
      this.getSupplierList();
      this.querySupplierInfo();
      this.getSupplierFinanceInfo();
    }
  },
  methods: {
    errorFileDownload () {
      this.errorFileType = true
      querySupplierUploadError().then(res => {
        res.data.list.map(item => {
          if (item.createTime) {
            let num = item.createTime.split('T')
            item.createTime = num[0] + ' ' + num[1].split('.')[0]
          }
        })
        this.errorFileData = res.data.list
      }).catch(err => {
        this.$message.err(err.msg || '失败文件访问失败、请联系管理员')
      })
    },
    downloadNeed () {
      this.$confirm("确认下载, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          downloadExternalNeedList()
            .then((res) => {
              loading.close();
              let blob = new Blob([res], {
                type: "application/json",
              });
              let downloadElement = document.createElement("a");
              let href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              downloadElement.download = "需求品牌城市" + ".xlsx";
              document.body.appendChild(downloadElement);
              downloadElement.click();
              document.body.removeChild(downloadElement);
              window.URL.revokeObjectURL(href);
            })
            .catch(() => {
              loading.close();
            });
        })
        .catch(() => { });
    },
    downloadCarSerial () {
      downloadCarSerial();
    },
    downloadCity () {
      downloadCity();
    },
    getSupplierFinanceInfo () {
      querySupplierFinanceInfo().then((res) => {
        this.financeData = res.data;
      });
    },
    close () {
      this.$confirm("请确定是否已下载失败文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.show = false;
        })
        .catch(() => { });
    },
    // 查询公司信息
    querySupplierInfo () {
      querySupplierInfo().then((res) => {
        this.companyInfo = res.data;
      });
    },
    onExceed (files, fileList) {
      this.$message.error("只能上传一个文件");
    },
    handleRemove (file, fileList) {
      this.file = {};
      this.$nextTick(() => {
        this.$refs.upload.clearFiles();
      });
    },
    loadJsonFromFile (file, fileList) {
      this.uploadFilename = file.name;
      this.file = file.raw;
      var testmsg = this.uploadFilename.substring(
        this.uploadFilename.lastIndexOf(".") + 1
      );
      let extension = testmsg === "xls";
      let extension2 = testmsg === "xlsx";
      let isLt2M = this.file.size / 1024 / 1024 < 10;
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "warning",
        });
        return;
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过10MB!",
          type: "warning",
        });
        return;
      }
    },
    // 上传文件
    commitDataOrderFile () {
      this.$refs['upLoadBlur'].validate()
      if (!this.ruleForm.radioType) return this.$message.warning("上传类型：请选择上传类型 新车或二手车");
      if (this.flag) return this.$message.warning("请勿重复点击");
      const form = new FormData();
      form.append("file", this.file);
      this.$confirm("是否确认上传?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.flag) {
            this.$message.warning("请勿重复点击");
            return;
          }
          if (Object.keys(this.file || {}).length == 0) {
            this.$message.warning("请上传文件");
            return;
          }
          this.flag = true;
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          commitDataOrderFile(form, this.ruleForm.radioType)
            .then((res) => {
              loading.close();
              this.flag = false;
              if (res.code == 100301) {
                this.dialogVisible = false;
                this.url = res.data.url;
                this.name = res.data.fileName;
                this.$message({
                  showClose: false,
                  message: res.msg,
                  type: "error",
                  duration: 2800,
                  onClose: () => {
                    this.show = true;
                  },
                });
              } else if (res.code == 200) {
                this.$message.success(res.msg);
                this.dialogVisible = false;
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((res) => {
              loading.close();
              this.flag = false;
              this.$message.error(res);
            });
        })
        .catch((res) => {
          this.flag = false;
        });
    },
    incomeDetails () {
      this.$router.push({
        path: "/fundManage/fundList",
      });
    },
    renderHeaderTime (h, { column, $index }) {
      return [
        "time",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "时间【格式:yyyy-MM-dd HH:mm:ss】(必填,请注意文字格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderAddr (h, { column, $index }) {
      return [
        "addr",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "地址(非必填,请注意文字格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderSource (h, { column, $index }) {
      return [
        "source",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "订单来源(非必填,请注意文字格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderMode (h, { column, $index }) {
      return [
        "mode",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "购车方式：【0:新车购买,1:旧车置换,2:分期,3:全款,12:旧车分期置换,13:旧车全款置换】(非必填,请注意文字格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderSerial (h, { column, $index }) {
      return [
        "serialName",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "车型名称(必填,请注意文字格式规范,以需求品牌城市表文字为准)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderBrand (h, { column, $index }) {
      return [
        "brandName",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "品牌名称(必填,请注意文字格式规范,以需求品牌城市表文字为准)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderCity (h, { column, $index }) {
      return [
        "cityName",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "城市名称,请勿填写市(必填,请注意文字格式规范,以需求品牌城市表文字为准)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderIp (h, { column, $index }) {
      return [
        "ip",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "真实用户ip地址(必填,注意文字格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeaderName (h, { column, $index }) {
      return [
        "name",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "姓名：20字以内(必填,注意文字格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    renderHeader (h, { column, $index }) {
      return [
        "phone",
        h(
          "el-tooltip",
          {
            props: {
              content: (function () {
                return "手机号：11位正确手机号(必填,注意格式规范)";
              })(),
              placement: "top",
            },
          },
          [
            h("span", {
              class: {
                "el-icon-info": true,
              },
              style: "padding-left:5px;",
            }),
          ]
        ),
      ];
    },
    // 去上传
    goUpload () {
      this.dialogVisible = true;
      this.file = {};
      this.$nextTick(() => {
        this.$refs.upload.clearFiles();
      });
    },
    goView () {
      this.$router.push({
        path: "/dataManage/dayDataDetails",
      });
    },
    getSupplierList () {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      querySupplierDataList({ dateType: this.time })
        .then((res) => {
          loading.close();
          this.dataList = res.data.result;
          let tmp = res.data.result;
          let totalDataArr = [];
          let intentionRateArr = [];
          let useNumArr = [];
          let failNumArr = [];
          let time = [];
          for (let i = 0; i < tmp.length; i++) {
            let totalFail = 0;
            totalDataArr.push(tmp[i].totalNum);
            intentionRateArr.push(tmp[i].intentionRate);
            useNumArr.push(tmp[i].usedNum);
            // 当前这项的失败数和重复数相加
            totalFail = tmp[i].failNum + tmp[i].repeatedNum;
            // 失败数组
            failNumArr.push(totalFail);
            time.push(tmp[i].dayShowStr);
          }
          // 总量数据
          this.arr[0].num = res.data.totalNum;
          // 使用条数
          this.arr[1].num = res.data.totalUsedNum;
          // 意向率数据
          this.arr[2].num = res.data.intentionRate;
          // 失败数量
          this.arr[3].num = res.data.totalFailNum;
          this.lineChartData = {
            expectedData: time,
            actualData:
              this.id == 0
                ? totalDataArr
                : this.id == 1
                  ? useNumArr
                  : this.id == 2
                    ? intentionRateArr
                    : this.id == 3
                      ? failNumArr
                      : [],
          };
        })
        .catch(() => {
          loading.close();
        });
    },
    getIndex (item, index) {
      this.id = index;
      this.text = item.name;
      if (this.dataList) {
        let totalDataArr = [];
        let useNumArr = [];
        let intentionRateArr = [];
        let failNumArr = [];
        let time = [];
        for (let i = 0; i < this.dataList.length; i++) {
          let totalFail = 0;
          totalDataArr.push(this.dataList[i].totalNum);
          useNumArr.push(this.dataList[i].usedNum);
          intentionRateArr.push(this.dataList[i].intentionRate);
          // 当前这项的失败数和重复数相加
          totalFail = this.dataList[i].failNum + this.dataList[i].repeatedNum;
          // 失败数组
          failNumArr.push(totalFail);
          time.push(this.dataList[i].dayShowStr);
        }
        this.lineChartData = {
          expectedData: time,
          actualData:
            this.id == 0
              ? totalDataArr
              : this.id == 1
                ? useNumArr
                : this.id == 2
                  ? intentionRateArr
                  : this.id == 3
                    ? failNumArr
                    : [],
        };
      }
    },
    // 时间筛选
    changeTime (v) {
      this.getSupplierList();
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  padding-top: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;
  overflow: hidden;
  .outer {
    width: 78%;
    height: 100%;
    float: left;
    .rowItem {
      width: 100%;
      display: flex;
      .colItem {
        background: #ffffff;
        flex: 1;
        .chart-wrapper {
          height: 200px;
          line-height: 30px;
          background: #ffffff;
          padding: 10px 16px 0;
          margin-bottom: 32px;
          margin: 8px;
        }
      }
    }
    .row {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .col {
        flex: 1;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
      }
    }
  }
  .box {
    width: 19%;
    float: left;
    height: 100%;
    margin: 8px;
    background: #ffffff;
    text-align: left;
    padding-left: 30px;
    line-height: 50px;
    padding-bottom: 20px;
    margin-top: 5%;
    margin-left: 2%;
    p {
      font-size: 17px;
      font-weight: 500;
    }
  }
  .cur {
    border-bottom: 2px solid#46A6FF;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .avatar-uploader {
    margin: 30px;
    margin-left: 50px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
